<script setup>
import { defineOptions, ref, watchEffect } from 'vue'
import { copy2Clipboard } from '@/utils/commonUtil.js'
import { dbOptions, foreachTypeArr, batchPlaceholder } from '@/utils/config.js'
import { convertInsertBatch, convertForeachBatch } from '@/utils/batchConvert.js'

defineOptions({
  name: 'InsertBatch'
})
const data = ref({
  leftStr: '',
  rightStr: '',
  row: 10,
  primaryKey: 'id',
  tableName: '',
  dbType: 'mysql',
  foreachType: 'insertBatch',
  placeholder: {
    left: batchPlaceholder.left,
    right: batchPlaceholder.insert_right
  }
})
watchEffect(() => {
  if (data.value.foreachType === 'insertBatch') {
    data.value.placeholder.right = batchPlaceholder.insert_right
  }
  if (data.value.foreachType === 'updateBatch') {
    data.value.placeholder.right = batchPlaceholder.update_right
  }
})
const convertBatch = () => {
  const foreachType = data.value.foreachType

  let tableName = data.value.tableName
  if (tableName === undefined || tableName === '' || tableName == null) {
    data.value.tableName = 'table_name'
  }
  if (foreachType === 'insertBatch') {
    convertInsertBatch(data.value)
  } else {
    convertForeachBatch(data.value)
  }
}
</script>
<template>
  <div class="container">
    <el-input
        type="textarea"
        class="textarea left"
        :row="data.row"
        :placeholder="data.placeholder.left"
        v-model="data.leftStr"
    />
    <el-input
        type="textarea"
        class="textarea right"
        :row="data.row"
        :placeholder="data.placeholder.right"
        v-model="data.rightStr"
    />
  </div>
  <el-footer>
    <el-form>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="data.tableName"
                placeholder="table_name"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item lable="数据库类型">
            <el-select
                v-model="data.dbType"
                placeholder="请选择数据库类型"
                filterable>
              <el-option
                  v-for="item in dbOptions"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item lable="数据库类型">
            <el-input v-model="data.primaryKey" placeholder="主键"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                v-model="data.foreachType"
                placeholder="请选择转换类型"
                filterable>
              <el-option
                  v-for="item in foreachTypeArr"
                  :key="item"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="convertBatch" type="primary">
              转换
            </el-button>
            <el-button @click="copy2Clipboard(data)" type="primary">
              复制
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-footer>
</template>
<style></style>
